<template>
  <div>
      <!-- 顶部 -->
             <!-- 路由跳转至首页 -->
        <div class="top" ref="goods">
            <router-link to="/">
                 <van-icon name="arrow-left" color="#666666" size="24px" />
            </router-link>
            <ul >
                <li @click="handlactive(item.id)" v-for="(item,index) in title" :key="index">
                    <a href="item.id">{{item.tie}}</a>
                </li>
            </ul>
            <van-icon name="shopping-cart-o"  color="#00D2C3" size="24px" @click="goshoppcar"/>
            <van-icon name="ellipsis"  size="24px"/>
        </div>
        <div class="sction">
            <div>   
                  <!-- 商品大图 -->
                <van-swipe class="my-swipe" indicator-color="white">
                    <van-swipe-item><img :src="src+getgoods.goodsImg" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="src+getgoods.goodsImg" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="src+getgoods.goodsImg" alt=""></van-swipe-item>
                    <van-swipe-item><img :src="src+getgoods.goodsImg" alt=""></van-swipe-item>
                </van-swipe>
                    <!-- 商品标题 -->
                <div class="tetile">
                    <div class="tet">
                        {{getgoods.goodsName}}
                    </div>
                    <!-- 分享商品瞄点 -->
                    <a href="#" class="share">
                        <i class="iconfont">&#xe624;</i>
                    </a>
                </div>
                <!-- 商品价格 -->
                <div class="container">
                    <!-- 现价 -->
                    <div class="price">
                        <span class="redorange">¥{{getgoods.goodsPrice}}</span>
                        <span class="bg-orange" @click="fetchData">宝贝价格</span>
                    </div>
                <!-- 市场价 -->
                    <div class="market_price">
                        <!-- <span class="market">市场价格</span>
                        <span class="line-through">¥ 268.00元</span>/ -->
                        <span class="volume" style="padding-left: 116px">销量:</span>
                        <span class="flex-item">{{getgoods.goodsPayNum}}</span> 
                    </div>
                </div>
            </div>
           
            <!-- 查看其它商品 -->
            <div class="box">
                <h5 class="relative">
                    <span class="bordred"> 看了又看</span>
                    <span class="slideNext">
                        <!-- 换一批 -->
                        <i class="iconfont">&#xe64a;</i>
                    </span>
                </h5>
               <!-- 轮播组件做的页面滑动效果 -->
                <van-swipe :show-indicators="false" v-if="goodslist.length">
                     <van-swipe-item class="swiper-container"  > 
                        <div class="product-rec-item" v-for="(item,index) in 4" :key="index">
                            <a href="#">
                                <div class="placeholder textc" >
                                    <img :src="`https://www.160dyf.com/${goodslist[index].goodsImg}`"  class="product-image">
                                    <p>{{goodslist[index].goodsName}}</p>
                                </div>
                            </a>
                        </div>
                    </van-swipe-item>
                    <!-- 第二页 -->
                    <van-swipe-item class="swiper-container" >
                       <div class="product-rec-item" v-for="(item,index) in 4" :key="index">
                            <a href="#">
                                <div class="placeholder textc" >
                                    <img :src="`https://www.160dyf.com/${goodslist[index].goodsImg}`"  class="product-image">
                                    <p>{{goodslist[index].goodsName}}</p>
                                </div>
                            </a>
                        </div>
                    </van-swipe-item>
                    <!--  -->
                </van-swipe>
            </div>
            <!-- 评价 -->
            <div class="assess" ref="tock">
                <h5 class="assess_contener">
                    <div class="left">
                        <span class="contener">评价</span>
                        <!-- 评价数量 -->
                        <i class="num">(6)</i>
                    </div>
                    
                    <h6 class="right">
                        <span>好评率</span>
                        <!-- 百分率 -->
                        <span class="pct">100%</span>
                        <van-icon name="arrow" color="red"/>
                    </h6>
                </h5>
                <div class="tock">
                    <span>有图
                        <i>(0)</i>
                    </span>
                    <span>好评
                        <i>(0)</i>
                    </span>
                    <span>中评
                        <i>(0)</i>
                    </span>
                    <span>差评
                        <i>(0)</i>
                    </span>
                </div>
                <!-- 分割线 -->
                <div class="back_line">
                    <p></p>
                </div>
                <!-- 用户评论 -->
                <div class="assess_box">
                    <div class="left">
                        <!-- 用户头像 -->
                        <img src="../assets/img/ll.jpg" alt="">
                        <span class="user">用户名</span>
                        <span class="jhpl">精华评价</span>
                    </div>
                    <!-- 评分星星数 -->
                    <van-rate v-model="value" />
                </div>
                <!-- 评价内容 -->
                <p class="comment">
                    此商品很好，黄金分段更何况是看
                </p>
                <!-- 评论时间 -->
                <div class="time">
                    <span>2018</span>
                    <i>-</i>
                    <span>09</span>
                    <i>-</i>
                    <span>23</span>
                </div>
            </div>

            <!-- 商家信息 -->
            <div class="store">
                <div>
                    <h4>
                        卖家:
                        <span>噜噜HN百货(CQ)</span>
                    </h4>
                    <p>钻石店铺</p>
                </div>
            
                <ul class="serve">
                    <li>
                        宝贝描述:
                        <i>4.5</i>
                        <span>高</span>
                    </li>
                    <li>
                        卖家服务:
                        <i>4.5</i>
                        <span>高</span>
                    </li>
                    <li>
                        物流服务:
                        <i>4.5</i>
                        <span>高</span>
                    </li>
                </ul>
            </div>

            <!-- 商品详情 -->
            <div class="detail" >
                <p ref="detail">详情</p>
                <div class="detail_tab"  >
                    <van-tabs 
                        type="line"
                        title-active-color="green" 
                        title-inactive-color="#333333" 
                        line-width="0"
                    >
                        <van-tab title="图文详情">
                            <div>我是内容1</div>
                        </van-tab>
                        <van-tab title="说明书">
                            <div>我是内容2</div>
                            </van-tab>
                        <van-tab title="规格参数">
                            <div>我是内容3</div>
                        </van-tab>
                    </van-tabs>
                </div>
            </div>
            <!-- 相关商品 -->
            <div class="related_goods">
                <p class="related_goods_text">相关商品</p>
            </div>

            <div style="width:100%">
    
            </div>
            <Detailslist/>


        </div>
        <!-- footer -->
        <div class="footer">
            <van-goods-action color="#c2b8b8">
                <van-goods-action-icon icon="wap-home-o" text="首页" />
                <van-goods-action-icon icon="chat-o" text="药师"  />
                <van-goods-action-icon icon="star" text="已收藏" :color="color==true?'#ff5000':''" @click="handleShoucang(getgoods.goodsId)"/>
                <van-goods-action-button type="warning" text="加入购物车" @click="addgoodscar"/>
                <van-goods-action-button type="danger" text="立即购买" @click="handleCheck"/>
            </van-goods-action>
        </div>
    </div>
</template>

<script>
// import {homelist} from '../api/home'
import request from '../utils/request'  //引入封装好的axios文件
import Detailslist from './Detailslist.vue'
import { Toast } from 'vant';
export default {
    components: {
        Detailslist,   //挂载detailslist组件
    },
    data() {
        return {
        src:'https://www.160dyf.com/',
        title:[
            {tie:'商品',id:'goods'},
            {tie:'评价',id:'tock'},
            {tie:'详情',id:'detail'}
        ],
        active:0,
        activeName: "a",
        value: 3,
        images: [ 
            {image:"https://www.160dyf.com//Public/upload/SmartPage/1/tab/2021-12-10/61b2eb996ca6e.png",title:"领券中心"},
            {image:"https://www.160dyf.com//Public/upload/SmartPage/1/tab/2021-12-10/61b2eb9faef5d.png",title:"止咳化痰"}
            ],
        goodslist:[],
        newlist:[],
        num:[],
        loading: false,  //表示商品加载中
        finished: false,  //表示商品加载完了
        color:false
        }
    },
    
    methods: {
        //跳转至购物车
        goshoppcar(){
            this.$router.push('/goshoppcar')  //编程式导航   跳转至购物车页
        },
        addgoodscar(){
            this.$store.commit('cart/addgoods',this.getgoods)
        },
        handleShoucang(id){
            console.log(id);
            let {getgoods} = this
            this.color = !this.color
            if(this.color){
                this.$store.commit('detail/ShouMut',getgoods)
                // this.$router.push('/shoucang')
                Toast.success("收藏成功")
            }else{
                this.$store.commit('detail/QuxiaoMut',id)
                Toast.fail("取消收藏")
            }
        },
        handlactive(id) {
        //点击顶部选项卡 跳转相对应的位置
            let dd=id
            let el=this.$refs[dd]
            let top =el.offsetTop
            let luli=top-45
            console.log(top)
            el.css
            el.scrollTo(0,-luli,300)
        },
        handleCheck(){ //跳转结算页
            this.$router.push('/checkout')
            this.$store.commit('detail/CheckoutMut',this.getgoods)
        },

        //拿取数据
        fetchData() {  //数据请求的方法
            let url = `/hehe/Mobile/MobileApi/goodsTypeList.html?typeId=238&is_new=1&new_level=3&tagType=1&sortType=&page=1&pageSize=10&vue_nologin=1`
            request.get(url).then(res=>{
                let {list} = res.data.data
                if(list.length){  //判断拿取到的数据有没有商品存在  若有
                    this.goodslist = [  //则将this.goodslist中的旧数据和刚获取到的数据都展开并添加在this.goodslist中
                        ...this.goodslist, //旧数据
                        ...list  //新数据
                    ] 
                    // console.log(this.goodslist)
                    // console.log(this.goodslist.length)
                }else{
                    this.finished = true  //没有更多数据了
                }
                   this.loading = false;
            }) 
        },
    },
        
    computed:{
        getgoods() {  //状态机里的数据包
            return this.$store.state.detailsgoods.goods //商品详情渲染
        },
        pagenum() {
            return this.$store.state.detailsgoods.pagenum  //拿取状态机里的pagenum值(商品数据的条数)
        },
        rand(){ 
            for(let i=0;i<4;i++){
               this.num.push(parseInt(Math.random()*(this.newlist.length)))  //计划用生随机数来确定goodslist数组的下标  来随机渲染商品
            }
            return this.num
        },
    },
    created () {
        this.fetchData()
        console.log(this.getgoods)
        console.log(this.pagenum)
        // console.log(this.getgoods);
    },
 
    updated () {
        this.newlist=this.goodslist
        // console.log(this.rand)
    },
}
</script>

<style lang="less" scoped>
// 全局引入
// @import url(../assets/font/iconfont.css);
// @tab: font size 19px !important;
// @import url();
</style>
// 局部样式引入
<style src="../assets/font/iconfont.css" scoped>
</style>
<style src="../assets/css/Details.css" scoped>
</style>